<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="flex justify-between">
        <el-button size="default" type="primary" @click="handleAdd">添加萌宠商品</el-button>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        border
        class="mt-3"
        stripe
        style="width: 100%"
        tooltip-effect="dark"
      >
        <el-table-column :index="indexMethod" label="序号" prop="user_code" type="index" width="100px"></el-table-column>
        <el-table-column label="商品ID" prop="id"></el-table-column>
        <el-table-column label="装扮名称" prop="name"></el-table-column>
        <el-table-column label="装扮图片" prop="icon">
          <template slot-scope="{row}">
            <el-image v-if="row.icon" :lazy="true" :src="row.icon" class="imgaes" fit="fill"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="装扮动效" prop="icon">
          <template slot-scope="{row}">
            <el-image v-if="row.icon" :lazy="true" :src="row.icon" class="imgaes" fit="fill"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="兑换类型" prop="type">
          <template slot-scope="{row}">
            <span v-if="row.type == 1">萌宠碎片兑换</span>
            <span v-if="row.type == 2">M豆兑换</span>
            <span v-if="row.type == 3">粉钻兑换</span>
            <span v-if="row.type == 4">登录时间兑换</span>
            <span v-if="row.type == 5">免费兑换</span>
          </template>
        </el-table-column>
        <el-table-column label="装扮价值" prop="num">
          <template slot-scope="{row}">
            <span>{{ row.count + unit[parseInt(row.type) + 1] }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column label="兑换M豆数量" prop="num">-->
        <!--          <template slot-scope="{row}">-->
        <!--            <span v-if="row.coin">{{ row.coin }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="装扮类型" prop="sale_count">
          <template slot-scope="{row}">
            <span>背景</span>
          </template>
        </el-table-column>
        <el-table-column label="上架状态" prop="is_show">
          <template slot-scope="scoped">
            <el-tag v-if="scoped.row.status === 1" type="success">上架</el-tag>
            <el-tag v-if="scoped.row.status === 0" type="danger">下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="已购买数量" prop="sale_count"></el-table-column>
        <el-table-column label="创建时间" prop="created_at"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleEdit(scope.row)"
            >编辑
            </el-button>
            <el-button
              v-if="scope.row.status === 0"
              size="mini"
              type="text"
              @click="handleStatus(scope.row,1)"
            >上架
            </el-button>
            <el-button
              v-if="scope.row.status === 1"
              size="mini"
              type="text"
              @click="handleStatus(scope.row,2)"
            >下架
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <cus-pagination
        v-show="total > 0"
        :limit.sync="listQuery.perPage"
        :page.sync="listQuery.page"
        :total="total"
        @pagination="getTableData"
      />
    </el-card>
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="35%"
      @close="closeDialog"
    >
      <el-form ref="form" :inline="false" :model="formData" :rules="rules" label-width="150px" size="normal">

        <el-form-item label="装扮名称" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="装扮名称"
          />
        </el-form-item>

        <el-form-item label="装扮类型">
          <el-input
            v-model="formData.typeName"
            disabled
          />
        </el-form-item>

        <el-form-item label="装扮图片" prop="icon">
          <div class="awardBox">
            <div :class="{'hide_box': formData.icon, 'show_box': !formData.icon}" class="awardInfo">
              <img v-if="formData.icon" :src="formData.icon" class="avatar"/>
              <el-upload
                v-else
                ref="upload"
                :auto-upload="true"
                :http-request="customizeUpload"
                :limit="1"
                :on-success="handleSuccess"
                action=""
                class="upload-demo"
                list-type="picture-card"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
              <span class="closeIcon" @click="handleRemove"><i class="el-icon-delete"></i></span>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="装扮动效" prop="special">
          <div class="awardBox">
            <div :class="{'hide_box': formData.special, 'show_box': !formData.special}" class="awardInfo">
              <img v-if="formData.special" :src="formData.special" class="avatar"/>
              <el-upload
                v-else
                ref="upload"
                :auto-upload="true"
                :http-request="customizeUpload"
                :limit="1"
                :on-success="handleSuccess2"
                action=""
                class="upload-demo"
                list-type="picture-card"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
              <span class="closeIcon" @click="handleRemove2"><i class="el-icon-delete"></i></span>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="有效天数" prop="day">
          <el-input v-model="formData.day" clearable placeholder="请输入" size="normal">
            <template slot="append">天</template>
          </el-input>
        </el-form-item>


        <el-form-item label="装扮介绍" prop="desc">
          <el-input v-model="formData.desc" clearable placeholder="请输入" size="normal">
          </el-input>
        </el-form-item>


        <el-form-item label="兑换类型" prop="type">
          <el-select
            v-model="formData.type"
            clearable
            filterable
            placeholder="请选择类型"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item v-if="formData.type === 1" label="碎片兑换数量" prop="count">
          <el-input v-model="formData.count" clearable placeholder="请输入" size="normal">
            <template slot="append">个</template>
          </el-input>
        </el-form-item>

        <el-form-item v-if="formData.type === 2" label="M豆兑换数量" prop="count">
          <el-input v-model="formData.count" clearable placeholder="请输入" size="normal">
            <template slot="append">个</template>
          </el-input>
        </el-form-item>

        <el-form-item v-if="formData.type === 3" label="粉钻兑换数量" prop="count">
          <el-input v-model="formData.count" clearable placeholder="请输入" size="normal">
            <template slot="append">个</template>
          </el-input>
        </el-form-item>

        <!--        <el-form-item v-if="formData.type === 4" label="登录时间兑换" prop="num">-->
        <!--          <el-input v-model="formData.num" clearable placeholder="请输入" size="normal">-->
        <!--            <template slot="append">天</template>-->
        <!--          </el-input>-->
        <!--        </el-form-item>-->

        <el-form-item v-if="formData.type === 5" label="免费兑换" prop="count">
          <el-input v-model="formData.count" clearable placeholder="请输入" size="normal">
            <template slot="append">次</template>
          </el-input>
        </el-form-item>

        <!--        <el-form-item v-if="formData.type !== 2" label="M豆兑换数量">-->
        <!--          <el-input v-model="formData.coin" clearable placeholder="请输入" size="normal">-->
        <!--            <template slot="append">个</template>-->
        <!--          </el-input>-->
        <!--        </el-form-item>-->


      </el-form>

      <section slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
      </section>
    </el-dialog>

  </div>
</template>

<script>
import { dressUpAdd, dressUpdel, dressUpEdit, dressUpLine, dressUpList } from '../../api/petsManagement/dressUpGoods'

export default {
  name: 'petProducts',
  data() {
    return {
      unit: ['个', '个', '个', '天', '次'],
      dialogTitle: '新增',
      dialogVisible: false,
      info: {},
      loading: false,
      tableData: [],
      listQuery: {
        page: 1,
        perPage: 10
      },
      typeList: [
        {
          id: 1,
          name: '碎片兑换数量'
        },
        {
          id: 2,
          name: 'M豆兑换数量'
        },
        {
          id: 3,
          name: '粉钻兑换数量'
        },
        // {
        //   id: 4,
        //   name: '登录时间兑换'
        // },
        {
          id: 5,
          name: '免费兑换'
        }
      ],
      total: 1,
      formData: {
        typeName: '背景',
        day: undefined,
        desc: undefined,
        name: undefined,
        icon: undefined,
        type: undefined,
        special: undefined,
        count: undefined
      },
      rules: {
        desc: [{ required: true, message: '请输入', trigger: 'blur' }],
        day: [{ required: true, message: '请输入', trigger: 'blur' }],
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        count: [{ required: true, message: '请输入', trigger: 'blur' }],
        type: [{ required: true, message: '请选择', trigger: 'blur' }],
        icon: [{ required: true, message: '请上传动效', trigger: 'blur' }],
        special: [{ required: true, message: '请上传动效', trigger: 'blur' }]
      },
      rowId: undefined
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.dialogTitle === '新增') {
            dressUpAdd(this.formData).then(res => {
              if (res.code === 200) {
                this.dialogVisible = false
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.getTableData()
                this.dialogVisible = false

              }
            })
          } else {
            dressUpEdit(this.formData).then(res => {
              if (res.code === 200) {
                this.dialogVisible = false
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.getTableData()
                this.dialogVisible = false

              }
            })
          }
        }
      })
    },
    handleSuccess() {
      this.formData.icon = this.ossLastImgUrl
    },
    handleRemove() {
      this.formData.icon = undefined
    },
    handleSuccess2() {
      this.formData.special = this.ossLastImgUrl
    },
    handleRemove2() {
      this.formData.special = undefined
    },
    indexMethod(index) {
      return this.total - (this.listQuery.page - 1) * this.listQuery.perPage - index
    },
    // 网络请求
    /**
     * getTableData
     * @desc 获取表格数据
     */
    async getTableData() {
      this.loading = true
      for (let key in this.listQuery) {
        this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
      }
      const { data, code } = await dressUpList(this.listQuery)
      if (code === 200) {
        this.tableData = data.list
        this.total = data.meta.total
      }
      this.loading = false

    },
    closeDialog(form) {
      if (this.$refs[form]) {
        this.$refs[form].clearValidate() // 清除整个表单的校验
        this.$refs[form].resetFields() // 清除整个表单的校验
      }

      this.formData = {
        typeName: '背景',
        day: undefined,
        desc: undefined,
        name: undefined,
        icon: undefined,
        type: undefined,
        special: undefined,
        count: undefined
      }
    },
    handleEdit(row) {
      this.dialogVisible = true
      this.dialogTitle = '编辑'
      this.rowId = row.id
      this.info = row
      this.formData = { ...row }
      this.formData.type = parseInt(row.type)
      // this.formData.name = { ...row.shape }
    },
    handleStatus(row, type) {
      this.$confirm('确定操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dressUpLine({
          id: row.id
          // is_show: 1
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          }
          this.dialogVisible = false
          this.getTableData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

    },
    handleDelete(row) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dressUpdel({
          id: row.id
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.getTableData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleAdd() {
      this.dialogVisible = true
      this.dialogTitle = '新增'
    }
  }
}
</script>

<style lang="scss" scoped>
.petIcon {
  width  : 200px;
  height : 200px;
  border : 1px solid #eee;
}

.imgaes {
  width : 200px;
}

.awardBox {
  display         : flex;
  align-items     : center;
  justify-content : flex-start;
  width           : 100%;

  .awardInfo {
    margin-right    : 10px;
    border-radius   : 4px;
    position        : relative;
    overflow        : hidden;
    width           : 148px;
    height          : 148px;
    border          : 1px solid #c0ccda;
    border-radius   : 6px;
    display         : flex;
    align-items     : center;
    justify-content : center;

    .closeIcon {
      position        : absolute;
      top             : 0;
      bottom          : 0;
      right           : 0;
      left            : 0;
      display         : flex;
      justify-content : center;
      align-items     : center;
      font-size       : 10px;
      background      : rgba(0, 0, 0, .6);
      color           : #ffffff;
      overflow        : hidden;
      cursor          : pointer;
      font-size       : 18px;
      opacity         : 0;
      z-index         : 0;
    }
  }

  .hide_box:hover {
    .closeIcon {
      opacity : 1;
      z-index : 1;
    }
  }

  .show_box {
    .closeIcon {
      opacity : 0;
      z-index : -1;
    }
  }
}

</style>
